<template>
  <div class="worktable-readonly">
    <div id="graph-container-wrapper">
      <div id="graph-container">
        welcome
      </div>
    </div>
    <div id="minimap-container"></div>

    <node-drawer-bootstrap
        ref="nodeDrawerBootstrapRef"
        read-only>
    </node-drawer-bootstrap>
  </div>
</template>

<script>
import {Graph} from "@antv/x6";

import "./nodes/registerNode";
import "./edges/registerEdge";
import createEdge from "@/views/workTable/edges/createEdge.js";

import NodeDrawerBootstrap from "@/views/workTable/components/nodeDrawer/NodeDrawerBootstrap.vue";

export default {
  components: {
    NodeDrawerBootstrap,
  },

  props: {
    processDetail: Object
  },

  data() {
    return {
      currentDialogData: {},
      addNodeEvent: {},
      canvasData: {},
    }
  },

  // 提供全局公共数据
  provide() {
    return {
      worktableContext: this,
      graph: this.graph,
    }
  },

  watch: {
    processDetail: {
      handler() {
        this.getCanvasData()
      },
      deep: true
    },
  },

  async mounted() {
    this.initGraph()
    this.getCanvasData()

    this.bindResizeEvent()
  },

  beforeUnmount() {
    window.removeEventListener('resize', this.thatResize)
    clearTimeout(this.resizeDelayTimer)
    this.graph.dispose()
  },

  methods: {
    initGraph() {
      const that = this
      const graph = new Graph({
        container: document.getElementById("graph-container"),
        grid: {
          visible: true, // 绘制网格
          type: "mesh",
          size: 20, // 网格大小 px
          color: "rgb(246,246,246)",
        },
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          modifiers: "ctrl",
          minScale: 0.5,
          maxScale: 3,
        },
        connecting: {
          snap: {
            radius: 20,
          },
          router: {
            name: "manhattan",
          },
          connector: 'normal',
          anchor: "center",
          allowBlank: false,
          allowLoop: false,
          createEdge(e) {
            return createEdge(e, graph);
          },
        },
        highlighting: {
          magnetAdsorbed: {
            name: "stroke",
            args: {
              attrs: {
                fill: "#5F95FF",
                stroke: "#5F95FF",
              },
            },
          },
        },
        selecting: {
          enabled: false,
          // modifiers: "ctrl",
          rubberband: true,
          showNodeSelectionBox: true,
        },
        interacting: {
          nodeMovable: false,
          edgeMovable: false,
        },
        // snapline: true,
        // keyboard: true,
        // clipboard: true,
        panning: false,
        minimap: {
          enabled: true,
          container: document.getElementById("minimap-container"),
        },
        scroller: {
          enabled: true,
        },
      });

      graph.on("node:click", (e) => {
        that.handleNodeClick(e);
      });

      this.graph = graph;
    },

    handleNodeClick(e) {
      this.handleDialog(e.cell)
    },

    handleDialog(cell) {
      this.$refs.nodeDrawerBootstrapRef.showDrawer({cell, graph: this.graph, canvasData: this.canvasData})
    },

    getCanvasData() {
      const {canvas, nodes, edges, events} = this.processDetail

      this.canvasData = canvas;
      this.events = events;

      const _nodes = nodes.filter(item => item.shape !== 'placeholder')
      this.graph.fromJSON({
        edges: edges,
        cells: _nodes,
      });
      this.graph.centerContent()
    },

    bindResizeEvent() {
      this.thatResize = this.resize.bind(this)
      window.addEventListener('resize', this.thatResize)
    },


    resize() {
      clearTimeout(this.resizeDelayTimer)
      this.resizeDelayTimer = setTimeout(() => {
        console.log('resize worktable readonly>>>>>')
        const containerWrapperRect = document.querySelector('#graph-container-wrapper').getBoundingClientRect()
        this.graph.resize(containerWrapperRect.width, containerWrapperRect.height)
      }, 1000)
    },
  }
}
</script>

<style scoped lang="scss">
#minimap-container {
  position: absolute;
  top: 10px;
  right: 10px;
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.worktable-readonly {
  height: 750px;
  position: relative;
  background: white;

  #graph-container-wrapper {
    width: 100%;
    height: 100%;

    #graph-container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
